<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发表评价</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <link rel="stylesheet" href="../css/demo.css">
    <script src="../js/zxxFile.1.js"></script>
    <style>
        .upload_box {
            width: 100%;
            /* margin: 1em auto; */
        }

        .upload_drag_area {
            display: inline-block;
            width: 60%;
            padding: 4em 0;
            margin-left: .5em;
            border: 1px dashed #ddd;
            background: #fff url(drag.png) no-repeat 20px center;
            color: #999;
            text-align: center;
            vertical-align: middle;
        }

        .upload_drag_hover {
            border-color: #069;
            box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5);
            color: #333;
        }

        .upload_preview {
            background-color: #fff;
            overflow: hidden;
            _zoom: 1;
            float: left;
        }

        .upload_append_list {
            /* height: 300px; */
            margin-right: 8px;
            width: 60px;
            height: 60px;
            float: left;
            position: relative;
        }

        .upload_devare {
            margin-left: 2em;
            background: url('../img/删除@2x.png') no-repeat center;
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
            width: 12px;
            height: 12px;
            background-size: contain;
        }



        .upload_submit_btn {
            display: none;
            height: 32px;
            font-size: 14px;
        }

        .upload_loading {
            height: 250px;
            background: url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;
        }

        .upload_progress {
            display: none;
            padding: 5px;
            border-radius: 10px;
            color: #fff;
            background-color: rgba(0, 0, 0, .6);
            position: absolute;
            left: 25px;
            top: 45px;
        }

        .star span {
            -webkit-filter: grayscale(1);
        }

        .star span.active {
            -webkit-filter: grayscale(0);
        }
        #common{
        	box-sizing: border-box;
        }
    </style>
</head>

<body>
    <!--头部-->
    <!-- <div class="public-header flex">
        <span class="public-header-left-back"></span>
        <span class="public-header-center">发表评价</span>
        <span class="public-header-right"></span>
    </div> -->

    <!--正文-->
    <div class="Make-an-evaluation bc-gray">
        <div class="section-1 clearfix">
            <img src="../img/今日产品 图片@2x.png" alt="" id="userimg">
            <!--<textarea name="" id="" cols="30" rows="10">内容内容内容内容内容内容</textarea>-->
            <!--<span class="time">07.05</span>-->
            <span id="pro"></span>
        </div>
        <p class="t1">填写评价</p>
        <textarea name="" id="common" cols="30" rows="10" placeholder="请填写您的评价" style="border: none"></textarea>
        <div class="img">
            <p class="t2">
                <span>晒图</span>
                <em>（选填，最多3张）</em>
            </p>
            <div id="body" class="light">
                <div id="content" class="show">
                    <div class="demo">
                        <form id="uploadForm" action="http://47.93.242.9/ZITAOHUI/upload" method="post" enctype="multipart/form-data">
                            <div class="upload_box">
                                <div class="upload_main">
                                    <div id="preview" class="upload_preview"></div>
                                    <div class="upload_choose">
                                        <img src="../img/addcopy@2x.png" alt="" style='width:60px;height:60px' id="add_img">
                                        <input id="fileImage" type="file" size="30" name="fileselect[]" multiple style="display:none;" />
                                    </div>

                                </div>
                                <div class="upload_submit">
                                    <button type="button" id="fileSubmit" class="upload_submit_btn">确认上传图片</button>
                                </div>
                                <!-- <div id="uploadInf" class="upload_inf"></div> -->
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
        <p class="star">
            <font style="font-size: 14px;color: #121212;">评分：</font>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <em>0分</em>
        </p>
        <span class="button" style="width: 94%;border-radius: 0.09rem;">提交申请</span>
    </div>
    <script>
        // 从session中取出存储的图片和描述
        var pro_info
        // 获取订单的id
        var order_id = getQueryString('oid');
        var img =getQueryString('img');
        var pro = decodeURI(decodeURI(getQueryString('pro')));
        $("#userimg").attr("src",img);
        $("#pro").text(pro);
        //console.log('订单id：' + order_id)
        // 获取评分
        $('.star span').on('click', function () {
            // 获得点击的星星在所有星星中的顺序
            var idx = $('.star span').index($(this))
            // 给点击的星星（包含点击的）加上active
            $(this).closest('.star').find('span:lt(' + idx + 1 + ')').addClass('active')
                // 给点击星星之后的去除active
                .end().find('span:gt(' + idx + ')').removeClass('active')
            // 右部出现相应的评分
            $('.star em').html(idx + 1 + '分')
        })
        var params = {
            fileInput: $("#fileImage").get(0),
            dragDrop: $("#fileDragArea").get(0),
            upButton: $("#fileSubmit").get(0),
            url: $("#uploadForm").attr("action"),
            filter: function (files) {
                var arrFiles = [];
                for (var i = 0, file; file = files[i]; i++) {
                    if (file.type.indexOf("image") == 0) {

                        arrFiles.push(file);

                    } else {
                        alert('文件"' + file.name + '"不是图片。');
                    }
                }
                return arrFiles;
            },
            onSelect: function (files) {
                var html = '',
                    i = 0;
               
                var funAppendImage = function () {
                    file = files[i];
                    if (file) {
                        var reader = new FileReader()
                        reader.onload = function (e) {
                            html = html + '<div id="uploadList_' + i +
                                '" class="upload_append_list"><p>' +
                                '<a href="javascript:" class="upload_devare" title="删除" data-index="' +
                                i + '"></a>' +
                                '<img id="uploadImage_' + i + '" src="' + e.target.result +
                                '" class="upload_image" style="width:100%;height:100%"/></p>' +
                                '</div>';

                            i++;
                            funAppendImage();
                        }
                        reader.readAsDataURL(file);

                    } else {
                       
                        $("#preview").html(html);

                        if (html) {
                            //删除方法
                            $(".upload_devare").click(function () {
                                ZXXFILE.funDevareFile(files[parseInt($(this).attr("data-index"))]);
                                return false;
                            });
                        } else {
                            //提交按钮隐藏
                            $("#fileSubmit").hide();
                        }
                    }
                };
                funAppendImage();
            },
            onDevare: function (file) {
                $("#uploadList_" + file.index).fadeOut();
                $('#uploadForm')[0].reset();
            },
            onDragOver: function () {
                $(this).addClass("upload_drag_hover");
            },
            onDragLeave: function () {
                $(this).removeClass("upload_drag_hover");
            },
            onProgress: function (file, loaded, total) {
                var eleProgress = $("#uploadProgress_" + file.index),
                    percent = (loaded / total * 100).toFixed(2) + '%';
                eleProgress.show().html(percent);
            },
            onSuccess: function (file, response) {
                console.log(response)
                data = JSON.parse(response)
                if (data.code == 1) {
                    window.location.href = '../page/Review.html'
                }
            },
            onFailure: function (file) {
                console.log(file)
            },
            onCompvare: function () {
                //提交按钮隐藏
                $("#fileSubmit").hide();
                //file控件value置空
                $('#uploadForm')[0].reset();
                // 成功提示
                $("#uploadInf").append("<p>当前图片全部上传完毕，可继续添加上传。</p>");
            }
        };
        ZXXFILE = $.extend(ZXXFILE, params);
        ZXXFILE.init();
        $('#add_img').click(function () {
            if ($('.upload_append_list').filter(() => {
                    return $('.upload_append_list').css('display') != 'none'
                }).length > 2) {
                console.log($('.upload_append_list').css('display') != 'none')
                alert('最多上传三张图片')
            } else {
                $('#fileImage').click();
            }
        })
        var imgFile = [];
        $('#fileImage').change(function (e) {
            var input = document.getElementById('fileImage');
            imgFile.push(input.files[0])

            console.log(imgFile)
        });
        $('.button').on('click', function () {
            console.log(imgFile)
            var fd = new FormData();
            var input = document.getElementById('fileImage');
            for (var i = 0; i < imgFile.length; i++) {
                fd.append('files', imgFile[i]);
            }
            fd.append('content', $('#common').val())
            fd.append('orderId', order_id)
            fd.append('score', $('.star span.active').length)
            fd.append('user_id', sessionStorage.u_id)
            console.log(input)
            for (var pair of fd.entries()) {
                console.log(pair[0] + ', ' + pair[1]);
            }
            $.ajax({
                url: base_url + 'ZITAOHUI/addAssess',
                type: 'post',
                // cache: false,
                processData: false,
                contentType: false,
                data: fd,
                success: function (data) {
                    console.log(data)
                    if(data.code == 1){
                        alert("评论成功");
                        window.history.back();
                    }else{
                        alert("网络请求超时");
                    }
                },
                error: (data) => {
                    console.log(data)
                }
            })
        })
    </script>
</body>
</html>